<template>
  <div :class="className">
    <div class="card-label-text">
        {{ label }}
    </div>
    <div class="card-value-text" 
     :style="valueTextColor">
         {{ value }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { color } from 'echarts';
import { setWith, values } from 'lodash';
import { ref , reactive, computed } from 'vue'
let props = defineProps({
   bgName: {
    type: String,
    default: ()=> 'blue'
   },
   label: {
    type: String,
    default: ()=> ''
   },
   status: {
    type: Boolean,
    default: ()=> true
   },
   value: {
    type: [String, Number],
    default: ()=> 0
   }
})

const className = computed(()=>{
   return {
      'widrage-card': true,
      'blue-bg': props?.bgName == 'blue',
      'orange-bg': props?.bgName == 'orange',
      'purple-bg': props?.bgName == 'purple',
      'green-bg': props?.bgName == 'green',
   }
})

const valueTextColor = computed(()=>{
    switch(props?.bgName){
      case 'blue' : return { color: '#409EFF' };
      case 'orange' : return { color: '#FE8E0B' };
      case 'purple' : return { color: '#7C63EA' };
      case 'green' : return { color: '#08C28B' };
    }
})



</script>

<style scoped lang='less'>
  .widrage-card{
    height: 160px;
    padding: 27px 0px 0px 35px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .blue-bg{
    background-image: url('@/assets/images/hom-blue-bg.svg');
  }

  .blue-orange{
    background-image: url('@/assets/images/hom-orange-bg.svg');
  }

  .orange-bg{
    background-image: url('@/assets/images/hom-orange-bg.svg');
  }

  .purple-bg{
    background-image: url('@/assets/images/home-purple-bg.svg');
  }

  .green-bg{
    background-image: url('@/assets/images/hom-green-bg.svg');
  }

  .card-label-text{
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }


  .card-value-text{
    font-weight: 600;
    font-size: 36px;
    margin-top: 30px;
  }

</style>